<template>
  <div class="cooperator">
      合作伙伴
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  mounted() {
    setTimeout(() => {
      this.show = true;
    }, 3000);
  },
};
</script>

<style lang="scss" scoped>
.cooperator{
    display: flex;
    flex-direction: row;
    width: 1200px;
    margin: auto;
}
.box {
  position: relative;
  width: 25%;
  height: 500px;
  /* 子元素 .box>div 保持3d空间 */
  transform-style: preserve-3d;
  transform: rotateY(30deg);
  transition: 1s cubic-bezier(0.65, 0, 0.35, 1);
}
.box div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: palegoldenrod;
  transition: 1s cubic-bezier(0.65, 0, 0.35, 1);
  img {
    width: 100%;
    height: 100px;
  }
}
.box div:last-child {
  background-color: teal;
  transform: rotateX(45deg);
}
/* transform: none; */
/* opacity: 0; */
/* opacity: 0;
    transform: rotateX(-45deg) translateY(120px); */
/* transition: opacity 1s ease,background-color 0.35s cubic-bezier(.65,0,.35,1); */
</style>